/**
 * @name Comment
 * @description 评论/回复
 * @author darcrand
 */

import React, { useMemo } from 'react'
import { Avatar, Button } from 'antd'
import { LikeFilled, LikeOutlined, MessageOutlined } from '@ant-design/icons'

import styles from './styles.module.less'

const CommentList = ({ children = null, mode = 'light', isSub = false }) => {
  const className = useMemo(() => {
    return [styles.list, isSub ? styles.sub : null].filter(Boolean).join(' ')
  }, [mode])
  return <ul className={className}>{children}</ul>
}

const CommentItem = ({ data = {}, children = null }) => {
  return (
    <li className={styles.item}>
      <Avatar className={styles.avatar} />
      <div className={styles.body}>
        <p className={styles.name}>张三</p>
        <p className={styles.content}>666</p>

        <footer className={styles.footer}>
          <span>2亿年前</span>
          <Button.Group size='small'>
            <Button
              icon={data?.isLike ? <LikeFilled style={{ color: '#6cbc35' }} /> : <LikeOutlined />}
              type='text'
              style={{ marginRight: 20 }}
            >
              1
            </Button>
            <Button icon={<MessageOutlined />} type='text'>
              2
            </Button>
          </Button.Group>
        </footer>

        {children}
      </div>
    </li>
  )
}

export { CommentList, CommentItem }
